<template>

    <div>
         <van-dropdown-menu >
            <van-dropdown-item  title="全部商品" disabled/>
            <van-dropdown-item v-model="value2" :options="option2" title="价格" @change="changePrice"/>
            <van-dropdown-item v-model="value3" :options="filterCategory" title="分类" @change="changeCategory"/>
        </van-dropdown-menu>
         <!-- 如有没有搜索到商品显示 empty-->
            <van-empty
            v-if="goodList.length == 0"
            class="custom-image"
            image="search"
            description="抱歉,没有搜索到商品"
            />

             <!-- 引入下方产品展示组件，如果搜索到商品显示 -->
              <ul v-else>
                    <li v-for="item in goodList" :key="item.id" @click="btn(item.id)">
                        <img :src="item.list_pic_url" alt="">
                        <p>{{item.name}}</p>
                        <span>{{item.retail_price}}</span>
                    </li>
                </ul>

       
    </div>
</template>

<script>
// import Product from './Product.vue'
export default {
    name: 'VueMenudown',
    components:{
        // Product,
    },

    data() {
        return {
           
            value2: 'desc',
            value3:'a',
           
            option2: [
                { text: '价格由高到低', value: 'desc' },
                { text: '价格由低到高', value: 'asc' },
              
            ],
            // option3:[
            //     { text: '价格由高到低', value: 'a' },
            //     { text: '价格由低到高', value: 'b' },

            // ]
        };
    },
    props:["filterCategory",'goodList'],

    created() {
        // console.log(this.filterCategory)
        // console.log(this.)
        // this.value2=0;
        this.filterCategory.forEach(item => {
            if(item.checked){
                this.value3=item.value
            }
        });
        console.log(1,this.goodList);
    },

    methods: {
        btn(id){
        console.log(id)
        this.$router.push({path:'/detail',query:{id}})
      },
      //修改价钱
      changePrice(){
          //参数传给父组件
          this.$emit('changePrice',this.value2)   //desc  asc

      },
      //修改分类
      changeCategory(value){
          this.$emit('changeCategory',this.value3)

      }
    },
};
</script>

<style lang="less" scoped>
ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li{
        width: 49%;
        img{
            width: 100%;
        }
        p{
            font-size: 18px;
        }
        span{
            font-size: 15px;
        }
    }
}
</style>